<?php
// echo "<h2>概览页</h2>";
// phpinfo();
?>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>基本情况概述</title>
    <meta name="renderer" content="webkit" />
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.29/esri/css/esri.css">
    <style>
        
        #myMapLegend {
            position: absolute !important;
            left: 10px;
            top: 10px;
            z-index: 2;
            background-color: #fff;
            /*max-height: 150px;*/
            /* max-height: 450px; */
            max-height: 300px;
            max-width: 200px;
            overflow: auto;
            display: block;
        }

        #myMapLegend::-webkit-scrollbar{
            display: block;
        }
        

        .mainPage{
            /* background-color: #002311; */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }
        .topPage{
            /* background-color: #01AAED; */
            width:100%;
            height:400px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .bottomPage{
            /* background-color: #230011; */
            width:100%;
            height:560px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        .topLeft{
            /* background-color: yellow; */
            width:62%;
            height:100%;
        }
        .topRight{
            /* background-color: greenyellow; */
            width:36%;
            height:100%;
        }
        .bottomLeft{
            /* background-color: blueviolet; */
            width:35%;
            height:100%;
        }
        .bottomRight{
            /* background-color: pink; */
            width:62%;
            height:100%;
        }

    </style>
    
    <script src="http://js.arcgis.com/3.29/init.js"></script>
    <script>
        var mapServer = {
            // baseLay:"https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer",
            // layer1:"景点s://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer",
            // layer2:"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer", 
            baseLay:"https://gis24.jlu3s.com/server/rest/services/mapserver/mapserver/MapServer",
            layer1:"https://gis24.jlu3s.com/server/rest/services/mapserver/mapserver/MapServer",
            layer2:"https://gis24.jlu3s.com/server/rest/services/mapserver/mapserver/MapServer",          
            myLayer:"https://gis24.jlu3s.com/server/rest/services/mapserver/mapserver/MapServer"
        };
        var map;
        var layer1,layer2,myLayer;
        var legend;
        require(["dojo/dom",
            "dojo/on",
            "esri/map",
            'esri/geometry/Extent',
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/geometry/Point",
            "esri/dijit/Legend",
            "dojo/domReady!"],
        function ( dom, on, Map, Extent, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, Point, Legend) {

            map = new Map("map",{
                basemap:'satellite',
                logo:false,
                slider:false,
                backgroundColor:'#yellow'
            });

            var baseLay = new ArcGISDynamicMapServiceLayer(mapServer.baseLay);
            map.addLayer(baseLay,1);

            map.on("load",function(){
                
                let initExtent=new Extent({                                   
                    xmax:125,
                    xmin:60,
                    ymax:55,
                    ymin:15,                    
                    "spatialReference":{"wkid":4326}
                });
                map.setExtent(initExtent,true);//或者把initExtent的值直接放置于Map里的extent属性

            });

            layer1 = new ArcGISDynamicMapServiceLayer(mapServer.layer1);
            map.addLayer(layer1,2);

            layer2 = new ArcGISDynamicMapServiceLayer(mapServer.layer2);
            map.addLayer(layer2,3);
           
            myLayer = new ArcGISDynamicMapServiceLayer(mapServer.myLayer);
            map.addLayer(myLayer,4);

            legend = new Legend({
                map: map,
                layerInfos: [
                    {
                        layer: myLayer,
                        title: "图层"
                    }, 
                    // {
                    //     layer: layer1,
                    //     title: "图层1"
                    // },
                    // {
                    //     layer: layer2,
                    //     title: "图层2"
                    // }                    
                ]
            }, "myMapLegend");
            legend.startup();
           
        });

    </script>
</head>
<body>
<div class="mainPage">
    <div class="topPage">
        <div class="topLeft">            
            <div>
                <div id="map" style="width: 100%;">
                    <div id="myMapLegend"></div>
                </div>
            </div>
        </div>
        <div class="topRight">
            <div>
                <div>
                    <h5 style="font-size:1.5em; font-family:'楷体'">长春市旅游服务及管理系统简介</h5>
                </div>
                <div>
                    <div id="jieshao" style="width: 100%; overflow: auto">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长春市拥有丰富的旅游资源，以其独特的自然风光、历史文化和现代娱乐设施而闻名。这里有伪满皇宫博物院，净月潭国家级风景名胜区,长春世界雕塑公园，长影世纪城四个5A级景区。此外，长春动植物公园、吉林省博物院等景点也各具特色，为游客提供了丰富的旅游体验。无论是历史文化爱好者还是自然风光追求者，都能在长春找到心仪的旅游目的地。</p>
                        
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为了给游客提供更好的服务同时辅助管理者管理，本系统结合了数据库技术和ArcGIS功能，既能管理景点信息，同时又能与空间位置信息相结合，可通过景点的各个属性查询景点信息，并能通过GIS方式在地图上展示景点的空间位置。为了使数据管理更加便捷，还添加了动态更新功能，与GIS结合在地图上实时对景点信息进行增加、修改、删除、查询等操作。</p>
                        
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本系统的用户分为普通用户和管理员两种，分别面向游客和管理者。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottomPage">
        <div class="bottomLeft">
            <div>
                <div>
                    <h5 style="font-size:1.5em; font-family:'楷体'"> 近期天气情况</h5>
                </div>
                <div>
                    <iframe width="410" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=changchun&num=20&site=12"></iframe>
                </div>
                <div>
                    <iframe width="410" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=nongan&num=20&site=12"></iframe>
                </div>
                <div>
                    <iframe width="410" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=dehui&num=20&site=12"></iframe>
                </div>
                <div>
                    <iframe width="410" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=jiutai&num=20&site=12"></iframe>
                </div>
                <div>
                    <iframe width="410" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=yushu&num=20&site=12"></iframe>
                </div>
                <div>
                    <iframe width="410" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=shuangyang&num=20&site=12"></iframe>
                </div>
            </div>
        </div>
        <div class="bottomRight">
            <div>
                <div>
                    <h5 style="font-size:1.5em; font-family:'楷体'" >介绍视频</h5>                   
                </div>
                <div style="width:100%;height:500px;">
                    <div id="youku" style="width: 100%;height:100%;">
                        <!-- <iframe  width="100%" height="100%" src="//player.bilibili.com/player.html?isOutside=true&aid=720762375&bvid=BV1ZQ4y1z7BC&cid=417347739&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>   
                                          -->
                                          <iframe width="100%" height="100%" src="//player.bilibili.com/player.html?isOutside=true&aid=720762375&bvid=BV1ZQ4y1z7BC&cid=417347739&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
                    </div>
                </div>
            </div>              
        </div>
    </div>
</div>
</body>
</html>
